<!-- 机械中心 -->
<template>
  <div class="mechanics">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="container">
        <swiper
        :options="swiperOption"
        ref="mySwiper"
      >
        <swiper-slide class="swiper-slide-defalut">
          <MechanicsBanner></MechanicsBanner>
        </swiper-slide>
      </swiper>
      <!-- 数据部分 -->
      <div class="contentNode">
        <MechanicsContent></MechanicsContent>
      </div>
    </div>
    <FooterBar class="footerBar"></FooterBar>
  </div>
</template>

<script >
import NavBarHeader from "../../../components/NavBarHeader";
import FooterBar from "../../../components/FooterBar";
import MechanicsBanner from './mechanicsBanner/MechanicsBanner'
import MechanicsContent from './mechanicsContent/MechanicsContent'
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
// import引入的组件需要注入到对象中才能使用
components: {
  NavBarHeader,
  FooterBar,
  Swiper,
  SwiperSlide,
  MechanicsBanner,
  MechanicsContent,
},
  name: "Mechanics",
  data() {
 // 这里存放数据
    return {
      swiperOption: {
        direction: "vertical", // 水平方向移动
        slidesPerView: 1, // 设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        height: window.innerHeight, // 高度设置，占满设备高度
      },
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.navBarHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
</style>
